<template>
<div class="good-list-container">
    <!-- 头部搜索开始 -->
    <div class="search">
            <el-row type="flex" align='middle'>
            <!-- 第一列 -->
            <el-col :span="2" >
                <span class="sea">搜索</span>
            </el-col>
            <!-- 第二列 -->
            <el-col :span="4">
                <el-input 
                v-model.trim="params.name" 
                placeholder="请输入内容"
                clearable
                @change="holodechang"
                />
            </el-col>
            <el-col :span="2" >
                <span class="sea">品类</span>
            </el-col>
            <!-- 第二列 -->
            <el-col :span="4">
                <selectadmin 
                v-model="params.cate"
                @change="holodechang"
                />
            </el-col>
        </el-row>

    </div>
    <!-- 日期开始 -->
    <div class="date">
        <el-row type="flex" align="middle">
            <el-col :span="2">
                <span class="sea">日期</span>
            </el-col>
            <el-col :span="6">
                    <el-date-picker
                    v-model="params.date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
            </el-col>   

        </el-row>
    </div>
    <!-- 日期结束 -->

    <!-- 表格开始 -->
    <div class="table">
            <el-table
            :lazy="false"
            :data="list"
            tooltip-effect="dark"
            border
            style="width: 100%"  
            :default-sort = "{prop: 'params.price', order: 'descending'}"
            >
                <el-table-column
                align="center"
                type="selection"
                >
                </el-table-column>

                <el-table-column
                prop="name"
                label="商品名称"
                align="center"
                >
                    <template slot-scope='scope'>
                        <div class="name-img">
                            <img :src='"http://localhost:8888"+scope.row.img' alt="" />
                            <div v-text='scope.row.name'></div>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column
                prop="cate"
                label="商品类型"
                align="center"
                sortable
                >
                  <template slot-scope="scope">
                      <div v-text="catehalod(scope.row.cate)"></div>
                  </template>
                </el-table-column>

                <el-table-column
                prop="hot"
                label="是否热销"
                align="center"
                sortable
                >
                    <template slot-scope='scope'>
                        <div v-text="scope.row.hot?'是':'否'"></div>
                    </template>
                </el-table-column>


                <el-table-column
                prop="price"
                label="价格"
                align="center"
                sortable
                >
                </el-table-column>

                <el-table-column
                prop="create_time"
                label="上架时间"
                align="center">
                    <template slot-scope="scope">
                        <div v-text="momentdata(scope.row.create_time)"></div>
                    </template>
                </el-table-column>


                <el-table-column
                    fixed="right"
                    label="操作"
                    align="center"
                    >
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row._id,'add')" type="text" size="small">编辑</el-button>
                        <el-button @click="handleClick(scope.row._id,'del')" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
                <template #append >
                    <div class="footer" >
                        <el-button
                            size="mini"
                            type="danger"
                            @click="delAll('delAll')">
                            删除选中的行
                        </el-button>
                        <el-button
                            size="mini">
                            取消选择
                        </el-button>
                    </div>
                </template>

        </el-table>
    </div>
    <!-- 表格结束 -->

    <!-- 分页开始 -->
    <div class="page">
    <el-pagination
      @size-change="holodechang"
      @current-change="holodechang"
      :current-page.sync="params.page"
      :page-sizes="[2, 5, 10, 20]"
      :page-size.sync="params.size"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    </div>
    <!-- 分页结束 -->
</div>
    
</template>
<script>
import { goodlist } from '@/api/good'
import selectadmin from './components/select.vue'
import moment from 'moment';
import {mapState} from "vuex"
export default {
    name:'goodlist',
  components: { selectadmin },
    data(){
        return{
            params:{
                name:'',
                cate:'',
               create:'',
                page:5,
                size:2
            },
            total:0
            ,
            list:[]
        }
    },
    created(){
        this.init()
        
    },

    activated(){
        this.init()
    },
    computed:{
        ...mapState('good',['catelist'])

    }

    ,
    methods:{
        init(){
            goodlist(this.params).then(res=>{
                let {list,total} = res.data
                
                console.log(res);
                this.list= list
                this.total = total
                this.$forceUpdate()
            })

        },

        // 表格的操作
        handleClick(parmas, type){
            switch (type) {
                case "add":
                    console.log(">>>>>>>>add", parmas)
                break
                case "del":
                    console.log(">>>>>>>>del", parmas)
                break
                default:
                    console.log("暂无此功能，待开发")
                break
            }
        },
        // 删除多个功能
        delAll(){
            console.log("删除多个");
        },
        // // size功能
        // sizeChange(e){
        //     console.log("数量size变换",e);
        //     this.params.size = e
        //     this.init()
        // },
        // // page功能
        // pageChange(e){
        //     console.log("page变换",e);
        //     this.params.page = e
        //     this.init()
        // },
        holodechang(){
            this.init()
        },
        momentdata(data){
            return moment(data).format("YY年MM月DD日")
        },
        catehalod(cate){
          let arr = this.catelist.find(ele=>ele.cate===cate)
          return arr?arr.cate_zh:""
         
        }

    }
    
}
</script>




<style lang="scss" scoped>
.good-list-container{
    padding: 20px;
    box-sizing: border-box;
    font-size: 14px;
    .search{
        padding: 15px 0;
        margin-bottom: 20px;
    }
    .sea{
        display: block;
        text-align: right;
        padding-right: 10px;

    }
    .el-row{
        margin-bottom: 20px;
    }
    .date{
        margin-bottom: 20px;

        
    }
    .table{
        margin-bottom: 15px;
    }
    .footer{
        padding: 15px 0 15px 0;
    }
    .page {
        margin: 15px 0;
        text-align: right;
    }
    .name-img{
        &>img{
            width: 50px;
        }
    }


    
}
</style>


